<%--
  Created by IntelliJ IDEA.
  User: wjy
  Date: 2020/12/11
  Time: 19:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="oastaglib" prefix="oas"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Online Attendance System</title>
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/bootstrap/dist/css/bootstrap-datetimepicker.min.css" /> ">
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/bootstrap/dist/css/bootstrap.min.css" /> ">
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/fonts/iconfont.css" /> ">
    <script type="text/javascript" src="<c:url value="/resources/js/jquery/dist/jquery.min.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/resources/bootstrap/dist/js/bootstrap.min.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/resources/bootstrap/dist/js/bootstrap-datetimepicker.min.js"/>"></script>
    <script type="text/javascript">
        $(function() {
            $('#datetimepicker4_1').datetimepicker({
                pickTime: false
            });
            $('#datetimepicker4_2').datetimepicker({
                pickTime: false
            });
        });
    </script>
</head>
<body style="background-color: #eeeeee">
    <oas:nav/>
    <oas:content>
        <br/><h1>考勤记录</h1><br/>
        <form action="<c:url value="/employee/attendances"/>" method="get">
            <div class="row">
                <div class="col-3" style="display: flex; flex-direction: row">
                    <div style="line-height: 28px">用户名：</div>
                    <label>
                        <input class="form-control" name="userName" value="${initUserName}"/>
                    </label>
                </div>
                <div class="col-4" style="display: flex; flex-direction: row">
                    <div style="line-height: 28px">起始日期：</div>
                    <div class="well">
                        <div id="datetimepicker4_1" class="input-append">
                            <label>
                                <input data-format="yyyy-MM-dd" type="text" class="form-control" name="startDate" value="${initStartDate}"/>
                            </label>
                            <span class="add-on" >
                            <i class="iconfont icon-calendar" data-date-icon="icon-calendar"></i>
                         </span>
                        </div>

                        <span class="glyphicon glyphicon-calendar"></span>
                    </div>
                </div>
                <div class="col-4" style="display: flex; flex-direction: row">
                    <div style="line-height: 28px">结束日期：</div>
                    <div class="well">
                        <div id="datetimepicker4_2" class="input-append">
                            <label>
                                <input data-format="yyyy-MM-dd" type="text" class="form-control" name="endDate" value="${initEndDate}"/>
                            </label>
                            <span class="add-on" >
                            <i class="iconfont icon-calendar" data-date-icon="icon-calendar" ></i>
                         </span>
                        </div>
                        <span class="glyphicon glyphicon-calendar"></span>
                    </div>
                </div>
                <div class="col-1">
                    <button type="submit" class="btn btn-primary btn-sm">查询</button>
                </div>
            </div>
        </form>
        <c:if test="${not empty errMsg}">
            <div class="alert alert-danger alert-dismissable">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
                    ${errMsg}
            </div>
        </c:if>
        <c:if test="${not empty warningMsg}">
            <div class="alert alert-warning alert-dismissable">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
                    ${warningMsg}
            </div>
        </c:if>
        <c:if test="${not empty okMsg}">
            <div class="alert alert-success alert-dismissable">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
                    ${okMsg}
            </div>
        </c:if>
        <hr style="width:100%" />
        <c:forEach items="${paginationSupport.items}" var="attendance" >
            <c:if test="${ not empty attendance && attendance.status == 1 }">
                <div class="card bg-info text-white">
                    <div class="card-header">${attendance.date}</div>
                    <div class="card-body">
                        <h4>签到人</h4>
                            ${attendance.user.fullName}
                        <h4>用户名</h4>
                            ${attendance.user.username}
                        <h4>签到时间</h4>
                        <fmt:formatDate value="${attendance.attendanceTime}" pattern="yyyy-MM-dd hh:mm:ss" />
                        <h4>签到状态</h4>
                            正常
                    </div>
                </div>
            </c:if>
            <c:if test="${ not empty attendance && attendance.status == 0 }">
                <div class="card bg-danger text-white">
                    <div class="card-header">${attendance.date}</div>
                    <div class="card-body">
                        <h4>签到时间</h4>
                        <fmt:formatDate value="${attendance.attendanceTime}" pattern="yyyy-MM-dd hh:mm:ss" />
                        <h4>签到状态</h4>
                            迟到
                    </div>
                </div>
            </c:if>
            <hr style="width:100%" />
        </c:forEach>
        <div>
            每页${paginationSupport.pageSize}条考勤信息，  第${paginationSupport.currentPageNo}/${paginationSupport.totalPageCount}页,共${paginationSupport.totalCount}条考勤信息
            <ul class="pagination">
                <c:if test="${paginationSupport.previousPage}">
                    <li class="page-item">
                        <a class="page-link" href="<c:url value="/employee/attendances?userName=${initUserName}&startDate=${initStartDate}&endDate=${initEndDate}&pageNo=${paginationSupport.currentPageNo-1}" />" >上一页</a>
                    </li>
                </c:if>
                <c:forEach var="i" begin="1" end="${paginationSupport.totalPageCount}" step="1">
                    <li class="page-item">
                        <a class="page-link" href="<c:url value="/employee/attendances?userName=${initUserName}&startDate=${initStartDate}&endDate=${initEndDate}&pageNo=${i}" />" > ${i}</a>
                    </li>
                </c:forEach>
                <c:if test="${paginationSupport.nextPage}">
                    <li class="page-item">
                        <a class="page-link" href="<c:url value="/employee/attendances?userName=${initUserName}&startDate=${initStartDate}&endDate=${initEndDate}&pageNo=${paginationSupport.currentPageNo+1}" />" >下一页 </a>
                    </li>
                </c:if>
            </ul>
        </div>
    </oas:content>
    <oas:footer/>
</body>